{% extends "base/base.html" %}
{% load static %}

{% block content %}
<div class="container-fluid py-4">
    <!-- 头部操作栏 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>
            <i class="bi bi-pencil-square me-2"></i>
            <span id="caseTitle">新建测试用例</span>
            <small class="text-muted ms-2" id="caseId"></small>
        </h2>
        <div>
            <button class="btn btn-secondary" id="btnCancel">
                <i class="bi bi-x-lg me-1"></i>取消
            </button>
            <button class="btn btn-primary ms-2" id="btnSave">
                <i class="bi bi-save me-1"></i>保存用例
            </button>
        </div>
    </div>

    <!-- 基础信息表单 -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">用例名称</label>
                    <input type="text" class="form-control" id="caseName">
                </div>
                <div class="col-md-3">
                    <label class="form-label">基础协议</label>
                    <select class="form-select" id="baseProtocol">
                        <option value="http">HTTP</option>
                        <option value="https">HTTPS</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 步骤管理容器 -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title mb-4">测试步骤</h5>

            <!-- 步骤列表 -->
            <div id="stepsContainer" class="sortable-steps">
                <!-- 步骤将通过JS动态添加 -->
            </div>

            <!-- 添加步骤按钮 -->
            <button class="btn btn-outline-primary w-100" id="btnAddStep">
                <i class="bi bi-plus-lg me-1"></i>添加测试步骤
            </button>
        </div>
    </div>
</div>

<!-- 步骤模板 (隐藏) -->
<div class="d-none">
    <div class="step-card card mb-3">
        <div class="card-body">
            <div class="step-header d-flex align-items-center mb-3">
                <i class="bi bi-grip-vertical handle me-2" style="cursor: move;"></i>
                <select class="form-select protocol-select me-2" style="width: 200px;">
                    <option value="http">HTTP 请求</option>
                    <option value="thrift">Thrift 服务</option>
                    <option value="sql">SQL 查询</option>
                </select>
                <button class="btn btn-danger btn-sm btn-remove-step">
                    <i class="bi bi-trash"></i>
                </button>
            </div>

            <!-- 协议配置区域 -->
            <div class="protocol-config">
                <!-- 各协议的表单将通过JS动态加载 -->
            </div>
        </div>
    </div>
</div>
{% endblock %}